<template>
<div>
  <el-dialog title="课程详情" :visible.sync="dialogTableVisible" :before-close="handleClose">
    <div style="font-size:18px">
    <span>课程名称：{{this.data.courseName}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>课时：{{this.data.courseHour}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>课程价格：{{this.data.courseTuition}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>拼团价格：{{this.data.ptTuition}}</span>
     <el-divider></el-divider>
    <span>上课时间：{{this.data.courseTime}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>开课老师：{{this.data.teacher}}</span>
    <br>
     <el-divider></el-divider>
    <span>课程描述：{{this.data.courseDesc}}</span>
    </div>


    <el-divider content-position="left">
      <span style="float:left;margin-left:15px;font-size:18px">课程宣传封面:</span>
    </el-divider>
   
    <span>
      <div class='div1'>
        <img  :src="this.data.imageUrl" alt="封面">
      </div>
    </span>

    <el-divider content-position="left">
     <span style="float:left;margin-left:15px;font-size:18px">公开课教学视频:</span>
    </el-divider>
    <span>
      <div class='div1'>
          <video id="video1" :src="this.data.videoUrl" controls="controls">
          您的浏览器不支持 video 标签。
          </video>
      </div>
    </span>
  </el-dialog>

</div>
</template>

<script>
  export default {
    data () {
      return {
        data: {
          id: '',
          courseName: '',
          courseHour: '',
          num: '',
          courseTime: '',
          courseTuition: '',
          ptTuition: '',
          courseType: '',
          teacher: '',
          courseDesc: '',
          imageUrl: '',
          mp4Url: '',
          videoUrl: ''
        },
        dialogTableVisible: false
      }
    },
     mounted: function () {

    },
    methods: {
      handleClose (done) {
        this.dialogTableVisible = false
        var myVideo = document.getElementById('video1')
        myVideo.pause()
      }

    }
  }
</script>

<style scoped>
.div1 {
    width:700px;
    height:400px;
    border:0px solid rgb(221, 221, 221);
    display: table-cell;
    vertical-align: middle;
 }
 .div1 img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
  }
  .div1 video {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
  }
 </style>
